<template>
  <div class="top-bar">
    <div class="top-wrapper">
      <div class="logo">
        <div class="logo-container">
          <img src="./assets/logo.png" alt="" class="logo-pic" />
        </div>
      </div>
      <div class="right-menu">
        <div :class="menuIconBox" @click="showNavOrNot()">
          <ul class="menu-icon">
            <li :class="menuIconLi1">
              <div class="menu-icon-line">
                <div class="menu-icon-line-solid"></div>
              </div>
            </li>
            <li :class="menuIconLi2">
              <div class="menu-icon-line">
                <div class="menu-icon-line-solid"></div>
              </div>
            </li>
            <li :class="menuIconLi3">
              <div class="menu-icon-line">
                <div class="menu-icon-line-solid"></div>
              </div>
            </li>
          </ul>
        </div>

        <ul :class="navClass">
          <li>
            <router-link to="/dashboard">Dashboard</router-link>
          </li>
          <li>
            <router-link to="/protection"
              ><span @click="protectionShow()">Protection</span></router-link
            >
          </li>
          <li>
            <router-link to="/governance"> Governance </router-link>
          </li>
          <li>
            <router-link to="/nftPortfolio">MD Nfts</router-link>
          </li>
          <li>
            <div :class="walletClass" @click="connectWallet()">
              {{ getCurrentAddress }}
            </div>
          </li>
        </ul>
      </div>
      <div class="wide-screen-wallet" @click="connectWallet()">
        {{ getCurrentAddress }}
      </div>
    </div>
  </div>

  <div class="content-container">
    <div class="nav-left-content">
      <ul class="nav-under-logo">
        <li>
          <router-link to="/dashboard">
            <div class="insertup">
              <div class="insert-inner-up"></div>
            </div>
            <div class="nav-under-logo-item">
              <img src="./assets/home-1.svg" alt="" />
              <div>Dashboard</div>
            </div>
            <div class="insertdown">
              <div class="insert-inner-down"></div>
            </div>
          </router-link>
        </li>

        <li>
          <router-link to="/protection">
            <div class="insertup">
              <div class="insert-inner-up"></div>
            </div>
            <span @click="protectionShow()">
              <div class="nav-under-logo-item">
                <img src="./assets/safe-1.svg" alt="" />
                <div>Protection</div>
              </div>
            </span>
            <div class="insertdown">
              <div class="insert-inner-down"></div>
            </div>
          </router-link>
        </li>

        <li>
          <router-link to="/governance">
            <div class="insertup">
              <div class="insert-inner-up"></div>
            </div>
            <div class="nav-under-logo-item">
              <img src="./assets/photo-4.svg" alt="" />
              <div>Governance</div>
            </div>
            <div class="insertdown">
              <div class="insert-inner-down"></div>
            </div>
          </router-link>
        </li>

        <li>
          <router-link to="/nftPortfolio">
            <div class="insertup">
              <div class="insert-inner-up"></div>
            </div>
            <div class="nav-under-logo-item">
              <img src="./assets/safe-1-3.svg" alt="" />
              <div>MD Nfts</div>
            </div>
            <div class="insertdown">
              <div class="insert-inner-down"></div>
            </div>
          </router-link>
        </li>
      </ul>

      <div class="follow">Follow us on:</div>

      <ul class="social-medias-list">
        <li>
          <img src="./assets/github-icon.svg" alt="" />
        </li>
        <li>
          <img src="./assets/discord-icon.svg" alt="" />
        </li>
        <li>
          <img src="./assets/Twitter-icon.svg" alt="" />
        </li>
        <li>
          <img src="./assets/Medium-icon.svg" alt="" />
        </li>
      </ul>
    </div>
    <div class="content">
      <router-view></router-view>
    </div>
    <div class="footer">Copyright © 2022 Meta Defender</div>
  </div>
</template>

<script>
import store from "./vuex/store";
import axios from "axios";

export default {
  name: "App",
  data() {
    return {
      navClass: "nav-initial",
      walletClass: "wallet-initial",
      showNav: false,
      menuIconBox: "menu-icon-box",
      menuIconLi1: "menu-icon-li1-init",
      menuIconLi2: "menu-icon-li2-init",
      menuIconLi3: "menu-icon-li3-init",
    };
  },
  methods: {
    showNavOrNot() {
      if (this.showNav == false) {
        this.showNav = true;
        this.navClass = "nav-show";
        this.menuIconLi1 = "menu-icon-li1-cross";
        this.menuIconLi2 = "menu-icon-li2-cross";
        this.menuIconLi3 = "menu-icon-li3-cross";
      } else {
        this.navClass = "nav-initial";
        this.menuIconLi1 = "menu-icon-li1-init";
        this.menuIconLi2 = "menu-icon-li2-init";
        this.menuIconLi3 = "menu-icon-li3-init";
        this.showNav = false;
      }
    },
    connectWallet() {
      store.dispatch("linkWallet");
    },
    protectionShow() {
      store.dispatch("protectionOriginShowAgainDo");
    },
  },
  computed: {
    getCurrentAddress() {
      return store.state.web3Utils.currentAddress;
    },
  },
  mounted() {
    axios.defaults.baseURL =
      "https://api.thegraph.com/subgraphs/name/lutianzhou001/md-mumbai";

    store.dispatch("getWeb3");

    store.state.web3Utils.ethereum.on("accountsChanged", function (accounts) {
      if (accounts.length != 0) {
        let disLength = accounts[0].length;
        store.state.web3Utils.currentAddressComp = accounts[0];
        store.state.web3Utils.currentAddress =
          accounts[0].substring(0, 4) +
          "***" +
          accounts[0].substring(disLength - 2, disLength);

        let query1 = `
                            query MyQuery {
                                policies(where: {beneficiary: "${accounts[0]}"}) {
                                  SPS
                                  coverage
                                  duration
                                  enteredEpochIndex
                                  fee
                                  id
                                  isClaimApplying
                                  isClaimed
                                  isSettled
                                  standardRisk
                                  policyId
                                  beneficiary
                                }
                              }
                            `;

        axios({
          method: "post",
          url: "",
          data: {
            query: query1,
          },
        }).then(
          (response) => {
            console.log(response.data.data.policies);
            store.dispatch(
              "web3Data/doupdatePolicyArr",
              response.data.data.policies
            );
          },
          (error) => {
            console.log("no nfts" + error);
          }
        );

        let query2 = `
            query {
              liquidityCertificates(where: {owner : "${accounts[0]}"}) {
              id
              certificateId
              enteredEpochIndex
              exitedEpochIndex
              isValid
              liquidity
              owner
              rewardDebtEpochIndex
              SPSLocked
              }
            } 
            `;

        axios({
          method: "post",
          url: "",
          data: {
            query: query2,
          },
        }).then(
          (response) => {
            console.log(response.data.data.liquidityCertificates);
            store.dispatch(
              "web3Data/doupdateCertificateArr",
              response.data.data.liquidityCertificates
            );
          },
          (error) => {
            console.log("no nfts" + error);
          }
        );
      } else {
        store.state.web3Utils.currentAddressComp = "";
        store.state.web3Utils.currentAddress = "Connect Wallet";

        store.dispatch("web3Data/doupdateCertificateArr", []);
        store.dispatch("web3Data/doupdateCertificateArr", []);
        console.log(store.state.web3Data.certificateArr);
      }
    });
  },
};
</script>

<style lang='less'>
.router-link-active {
  text-decoration: none;
  color: #a0a9bd;
  transition: all 0.2s linear;
}

.top-bar {
  width: 100%;
  height: 100px;
  margin: 0 auto;
  background-color: #141a2a;
  font-size: 18px;
  position: fixed;
  z-index: 98;
  .top-wrapper {
    width: 90%;
    height: 100px;
    margin: 0 auto;
    background-color: #141a2a;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .logo {
      .logo-container {
        height: 43.1px;
        position: relative;
        .logo-pic {
          height: 40.1px;
          cursor: pointer;
          position: absolute;
          bottom: 0;
          transition: 0.3s;
        }

        .logo-pic:hover {
          bottom: 3px;
          transition: 0.3s;
        }
      }
    }
  }
}

.content {
  min-height: calc(100vh - 100px);
}

.menu-icon-box {
  width: 48px;
  height: 48px;
  border: 1px solid #1649ff;
  border-radius: 50%;
  background-color: #1649ff;
  .menu-icon {
    position: relative;
    li {
      position: absolute;
      left: 11.5px;
    }
    .menu-icon-line {
      width: 60px;
      .menu-icon-line-solid {
        height: 0.5px;
        width: 25px;
        background-color: #eff1f6;
      }
    }
    .menu-icon-li1-init {
      top: 14px;
      transition: 0.3s;
    }
    .menu-icon-li2-init {
      top: 24px;
      transition: 0.3s;
    }
    .menu-icon-li3-init {
      top: 34px;
      transition: 0.3s;
    }
    .menu-icon-li1-cross {
      top: 11.5px;
      left: 7px;
      transform: rotateZ(-45deg);
      transition: 0.3s;
    }
    .menu-icon-li2-cross {
      display: none;
      transition: 0.3s;
    }
    .menu-icon-li3-cross {
      top: 36.5px;
      left: 7px;
      transform: rotateZ(45deg);
      transition: 0.3s;
    }
  }
}

.nav-initial {
  display: block;
  position: absolute;
  left: 100%;
  right: 0;
  width: 100%;
  z-index: 99;
  background-color: #141a2a;
  transition: left 0.3s linear;
  li {
    color: #eff1f6;
    width: 90%;
    margin: 8% auto;
    font-size: 24px;
  }
}

.wallet-initial {
  cursor: pointer;
  width: 100%;
  background-color: #1649ff;
  height: 60px;
  text-align: center;
  line-height: 60px;
  font-size: 20px;
  font-weight: 600;
  border-radius: 8px;
}

.nav-show {
  display: block;
  position: absolute;
  z-index: 99;
  left: 0;
  right: 0;
  width: 100%;
  background-color: #141a2a;
  transition: left 0.3s linear;
  li {
    color: #eff1f6;
    width: 90%;
    margin: 8% auto;
    font-size: 24px;
  }
}

.nav-under-logo,
.follow,
.social-medias-list,
.wide-screen-wallet {
  display: none;
}

.content-container {
  min-height: 100vh;
  padding-top: 100px;
}

.footer {
  height: 45px;
  width: 90%;
  text-align: center;
  line-height: 45px;
  border-top: 2.5px solid #515b72;
  color: #a0a9bd;
  font-size: 14px;
  margin: 30px 5% 0px;
}

@media (min-width: 916px) {
  .router-link-active {
    text-decoration: none;
    color: #a0a9bd;
    background-color: #1a2237;
    border-radius: 20px 0 0 20px;
    box-shadow: #1649ff -5px 5px 5px;
    transition: all 0.2s linear;
    .insertup {
      height: 15px;
      width: 15px;
      background-color: #1a2237;
      position: absolute;
      bottom: 100%;
      right: 0;
    }
    .insertdown {
      height: 15px;
      width: 15px;
      background-color: #1a2237;
      position: absolute;
      bottom: -15px;
      right: 0;
      z-index: -1;
    }
  }

  .insert-inner-up {
    height: 15px;
    width: 15px;
    border-radius: 0 0 15px 0;
    background-color: #141a2a;
  }

  .insert-inner-down {
    height: 15px;
    width: 15px;
    border-radius: 0 15px 0 0;
    background-color: #141a2a;
  }

  .top-bar {
    z-index: 98;
  }

  .menu-icon-box {
    display: none;
  }

  .nav-initial {
    display: none;
  }

  .nav-show {
    display: none;
  }

  .nav-left-content {
    width: 20%;
    position: fixed;
    height: 100vh;
    background-color: #141a2a;
    .nav-under-logo {
      display: block;
      height: 400px;
      min-height: calc(100vh - 290px);
      li {
        color: #eff1f6;
        font-size: 20px;
        font-weight: 500;
        height: 7%;
        min-height: 66px;
        padding-left: 18%;
        margin: 10% 0;
        position: relative;
        a {
          display: block;
          height: 100%;
          display: flex;
          flex-direction: column;
          justify-content: space-around;
          padding-left: 10px;
        }
        .nav-under-logo-item {
          display: flex;
          align-items: center;
          height: 100%;
        }

        .nav-under-logo-item img {
          margin-right: 10px;
        }

        .nav-under-logo-item div {
          white-space: nowrap;
        }
      }
    }
  }

  .follow {
    display: block;
    color: #eff1f6;
    font-size: 18px;
    font-weight: 700;
    padding-left: 12%;
    margin-bottom: 30px;
  }

  .social-medias-list {
    display: flex;
    padding: 0 9%;
    text-align: center;
    li {
      flex: 1;
      cursor: pointer;
      display: block;
    }
    img {
      height: 36px;
    }
  }

  .content {
    position: absolute;
    left: 20%;
    width: 80%;
    min-height: calc(100vh - 100px);
    top: 100px;
    margin-top: 0;
    padding-bottom: 50px;
  }

  .wide-screen-wallet {
    cursor: pointer;
    display: block;
    color: #eff1f6;
    background-color: blue;
    font-size: 17px;
    font-weight: 600;
    height: 60px;
    line-height: 60px;
    width: 15%;
    text-align: center;
    border-radius: 8px;
  }

  .footer {
    display: none;
  }
}
</style>
